<template>
  <div
    v-if="isLoading == 1"
    class="absolute w-full h-full top-0 left-0 bg-white opacity-60 z-10"
  ></div>
  <div
    v-if="isLoading > 0"
    class="absolute bg-white h-10 w-40 inset-x-0 top-14 m-auto flex justify-center items-center z-20 rounded-3xl"
  >
    <svg
      v-if="isLoading == 1"
      class="animate-spin -ml-1 mr-3 h-5 w-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        class="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        stroke-width="4"
      ></circle>
      <path
        class="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      ></path>
    </svg>
    {{ tipText }}
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { defaultLoaderModel } from "../utils/LoaderModel";
import { DefaultLoaderanager } from "../utils/LoaderManager";

let timeout: any;
let isLoading: Ref<number> = ref(0);
let tipText: Ref<string> = ref("");

function loadStart() {
  window.clearTimeout(timeout);
  tipText.value = "正在加载";
  isLoading.value = 1;
}
function loaded(e: any) {
  let { time } = e.data;
  tipText.value = `用时${time}毫秒`;
  isLoading.value = 2;
  clearTimeout_();
}
function error(e: any) {
  tipText.value = e.error;
  clearTimeout_();
}

defaultLoaderModel.addEventListener("loadStart", loadStart);
defaultLoaderModel.addEventListener("loaded", loaded);
defaultLoaderModel.addEventListener("error", error);

DefaultLoaderanager.addEventListener("loadStart", loadStart);
DefaultLoaderanager.addEventListener("loaded", loaded);
DefaultLoaderanager.addEventListener("error", error);

function clearTimeout_() {
  timeout = setTimeout(() => {
    isLoading.value = 0;
    window.clearTimeout(timeout);
  }, 8000);
}
</script>
